import React from 'react';
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import {FormControl, FormControlLabel, Radio, RadioGroup, Tooltip} from "@material-ui/core";
import IconButton from "@material-ui/core/IconButton";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faInfoCircle} from "@fortawesome/free-solid-svg-icons/faInfoCircle";
import {selectDeselectAnalysisMethodParams} from "../../../../../../../redux/reducers/editor";
import {useDispatch} from "react-redux";
import HelpIcon from "@material-ui/icons/Help";

export default function CheckBox(props) {
  // Props
  const {selectedAnalyticsMethodParams, paramData} = props;

  // Local Constants
  const dispatch = useDispatch();
  const [value, setValue] = React.useState('false');

  const handleChange = (event) => {
    setValue(event.target.value);
    let newSelectedAnalyticsMethodParams = selectedAnalyticsMethodParams;
    newSelectedAnalyticsMethodParams.forEach(param => {
      if (param.id === paramData.id) {
        param.value = event.target.value;
      }
    })
    dispatch(selectDeselectAnalysisMethodParams(newSelectedAnalyticsMethodParams));
  };

  return (
    <>
      <Grid container justify="space-between" alignItems="center">
        <Grid item xs>
          <Grid container alignItems="center">
            <Grid item>
              <Typography >{paramData.title}</Typography>
            </Grid>
            <Tooltip arrow placement="right-start" title={
              <Typography >{paramData.description}</Typography>
            }>
              <IconButton> <HelpIcon /> </IconButton>
            </Tooltip>
          </Grid>
        </Grid>
        <Grid item xs>
          <FormControl component="fieldset">
            <RadioGroup value={value} onChange={handleChange}>
              <FormControlLabel value="" control={<Radio color={"primary"}/>} label="True"/>
              <FormControlLabel value="false" control={<Radio color={"primary"}/>} label="False"/>
            </RadioGroup>
          </FormControl>
        </Grid>

      </Grid>
    </>
  );
}
